<template>
  <h6 style="color: crimson">商品与赠品管理--><a href="http://localhost:5173/gift">赠品管理</a>-->赠品转商品审核列表</h6>

  <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="赠品名称" prop="giftName">
      <el-input v-model="queryForm.giftName" placeholder="请输入赠品名称" />
    </el-form-item>
    <el-form-item label="赠品类型" prop="giftType">
      <el-select v-model="queryForm.giftType" placeholder="请选择赠品类型" style="width: 240px" clearable >
        <el-option
            v-for="item in typeOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="querySubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <hr>
  <el-table
      :data="tableList.tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
  >
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="giftName" label="赠品名称" width="180" />
    <el-table-column prop="giftType" label="赠品类型" width="180" />
    <el-table-column prop="marketPrice" label="赠品单价" width="180" />
    <el-table-column prop="count" label="数量" width="180" />
    <el-table-column prop="applyStatus" label="审核状态" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.applyStatus=='未通过'" type="warning">{{scope.row.applyStatus}}</el-tag>
        <el-tag v-else-if="scope.row.applyStatus=='已通过'" type="success">{{scope.row.applyStatus}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primary" v-show="scope.row.applyStatus=='未通过'" size="small" @click="examine(scope.$index, scope.row)">审核</el-button>

      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        :page-sizes="[2, 5, 10, 50]"
        layout="total, sizes, prev, pager, next"
        :total="tableList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>


</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {giftStore} from "@/stores/GiftModel.js";
const giftModel = giftStore()
const updateDialogVisible=ref(false)
const DialogVisible=ref(false)
const giftDetail =ref({
  gname: "",
  gtype: "",
  gmodel: "",
  marketPrice: "",
  purchasePrice: "",
  minStock: "",
  gcolor: "",
  gbrand: "",
  giftNUm:0
})



const updateForm =reactive( {updateData:{id:0,count:0}})


const examine=(index,row)=>{
  giftModel.$id=row.id
  router.push({path:"/gift/examineGift"})
}

const queryForm = ref({
  pageSize:10,
  pageNum:0
});
const querySubmit = () => {
  query()
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex%2 === 1) {
    return 'warning-row';
  } else{
    return 'success-row';
  }
  return '';
};

const tableList =reactive({tableData:[],total:10})
const handleSizeChange = (val) => {
  queryForm.value.pageSize=val
  query()
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  queryForm.value.pageNum=(val-1)*queryForm.value.pageSize
  query()
};
const typeOptions  =  reactive({optionData:[]})
onMounted(()=>{
      query()
      axios.get("/gift2goods/paramList").then(res=>{
        if(res.code===200){
          console.log(res.data)
          typeOptions.optionData=res.data
        }
      })
}
)

/**
 * 公共方法
 */
const query=()=>{
  axios.postJson("/gift2goods/getGifts2GooodsVo",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })
  axios.get("/gift2goods/getTatol").then( res=>{
    tableList.total=res.data
  })
}
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>